<template>
	<div>
		<!-- pc 端 -->
		<div class="user_referral_pc">
			<div class="overFlow_routerBox">
				<div class="referralPage">
					<h1 class="referral_pc_title">{{ $t("profile.afriend") }}</h1>
					<div class="referral_pc_navBox">
						<span class="referral_pc_navBox-item" @click="btnChangeNum(1)"
							:class="{ 'referral_pc_navBox-item--active': num === 1 }">{{ $t("profile.TellFriend") }}</span>
						<span class="referral_pc_navBox-item" @click="btnChangeNum(2)"
							:class="{ 'referral_pc_navBox-item--active': num === 2 }">{{ $t("profile.performance") }}</span>
					</div>

					<div class="referral_pc_boxWrap_1_Xis">
						<main v-if="num === 1">
							<div class="referral_pc_earningText">
								{{ $t("profile.earning") }}
							</div>
							<p class="referral_pc_txt1">{{ $t("profile.Optiona") }}</p>
							<p class="referral_pc_txt2">{{ $t("profile.Copyreferral") }}</p>
							<div class="referral_pc_urlBox">
								<el-input id="inputUrl" :readonly="true" :value="inputUrl" placeholder="请输入内容"
									style="width: 420px; height: 32px"></el-input>
								<span class="referral_pc_copyBtn" @click="copyChange">{{
                  $t("profile.copy")
                }}</span>
							</div>
							<p class="referral_pc_txt3" style="margin-bottom: 20px">
								{{ $t("profile.Option2") }}
							</p>
							<div class="referral_pc_emailBox">
								<div class="referral_pc_emailInputBox">
									<span style="margin: 10px 0px; display: inline-block">{{
                    $t("profile.Yourname")
                  }}</span><br />
									<div class="el-input el-input--small" style="width: 288px">
										<!----><input type="text" autocomplete="off" class="el-input__inner"
											v-model="yourname" />
										<!---->
										<!---->
										<!---->
										<!---->
									</div>
								</div>
								<div class="referral_pc_emailInputBox" style="margin-left: 20px">
									<span style="margin: 10px 0px; display: inline-block">{{
                    $t("profile.Yourfriend")
                  }}</span><br />
									<div class="el-input el-input--small" style="width: 288px">
										<!----><input type="text" autocomplete="off" class="el-input__inner"
											v-model="youremail" />
										<!---->
										<!---->
										<!---->
										<!---->
									</div>
								</div>
								<div class="el-textarea" style="margin-top: 20px; color: red !important">
									<textarea autocomplete="off"
										placeholder="Hey, I'm a member of Mottwebsite, and I've saved a lot so far on my online shopping. Join now with me and discover our great offers today!"
										rows="5" class="el-textarea__inner" style="min-height: 33px" v-model="content">
                  </textarea>
									<!---->
								</div>
								<p style="margin-top: 10px; text-align: left">
									{{ $t("profile.Youabove") }}
								</p>
								<div style="text-align: right; padding-bottom: 40px">
									<span class="referral_pc_sendEmailBtn_2WHsS" @click="earn">{{
                    $t("profile.SendEarn")
                  }}</span>
								</div>
							</div>
						</main>

						<main v-else>
							<div class="referral_pc_earningText_1bvCO">
								{{ $t("profile.Yourearnings") }} ￥{{ size }}
								<span style="text-align: left" class="el-tooltip referral_pc_howIcon_3Xlib mounClass"
									aria-describedby="el-tooltip-9679" tabindex="0">?</span>
							</div>
							<p style="text-align: left" class="referral_pc_overviewText_2UlUz">
								{{ $t("profile.friendoverview") }}
							</p>
							<div class="referral_pc_overTxtNavBox_1av_h">
								<span :class="{ referral_pc_overTxtNavItem: 1 === numAll }" @click="btnChange(1)"
									class="referral_pc_overTxtNavItem_2hFnJ">
									{{ $t("profile.Referralactivity") }}
									<!---->
									<!---->
								</span>

								<span :class="{ referral_pc_overTxtNavItem: 2 === numAll }" @click="btnChange(2)"
									class="referral_pc_overTxtNavItem_2hFnJ">
									{{ $t("profile.PendingReward") }}
									<span class="el-tooltip referral_pc_howIcon1_1_SNK"
										aria-describedby="el-tooltip-3838" tabindex="0"></span>
									<!---->
								</span>

								<span :class="{ referral_pc_overTxtNavItem: 3 === numAll }" @click="btnChange(3)"
									class="referral_pc_overTxtNavItem_2hFnJ">
									{{ $t("profile.PayableReward") }}
									<!---->
									<span class="el-tooltip referral_pc_howIcon1_1_SNK"
										aria-describedby="el-tooltip-9892" tabindex="0"></span>
								</span>
							</div>

							<div v-show="1 === numAll">
								<div class="referral_pc_activityList_iyMfd">
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.UserName") }} ￥{{ size}}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.MottwebsiteID") }}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.Registered") }}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.Submitted") }}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.Completed") }}
										</p>
									</span>
								</div>
								<div class="referral_pc_activityDataList_7QeZu" v-for="item in earnList" :key="item.id">
									<div style="margin: 20px 0px">
										<span class="referral_pc_activityDataItem_mJPgu">{{
                      item.invitedNickname
                    }}</span><span class="referral_pc_activityDataItem_mJPgu"
											style="margin-left: 36px">{{ item.invitedUserEmail }}</span>
										<div class="referral_pc_stepBox_35Dk8">
											<div class="van-steps van-steps--horizontal">
												<div class="van-steps__items">
													<div class="van-hairline van-step van-step--horizontal">
														<div class="van-step__title"></div>
														<div class="van-step__circle-container">
															<i class="van-step__circle"></i>
														</div>
														<div class="van-step__line"></div>
													</div>
													<div class="van-hairline van-step van-step--horizontal">
														<div class="van-step__title"></div>
														<div class="van-step__circle-container">
															<i class="van-step__circle"></i>
														</div>
														<div class="van-step__line"></div>
													</div>
													<div class="van-hairline van-step van-step--horizontal">
														<div class="van-step__title"></div>
														<div class="van-step__circle-container">
															<i class="van-step__circle"></i>
														</div>
														<div class="van-step__line"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="referral_pc_noneData_3-lI5" v-show="this.earnList.length == 0">
									<img src="../../assets/images/box.png" class="referral_pc_noneImg_1pLRH" />
									<p class="referral_pc_noneText_3UlHM">
										{{ $t("profile.Youdon")
                    }}<span class="active-text">{{
                      $t("profile.referfriends")
                    }}</span>
									</p>
								</div>
							</div>

							<div v-show="2 === numAll">
								<div class="referral_pc_activityList_iyMfd">
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.UserName") }}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">Mottwebsite ID</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.Reward") }}
										</p>
									</span>
								</div>
								<div class="referral_pc_pendingList_rWlha" v-for="item in earnList" :key="item.id"
									style="margin: 20px 0px">
									<span class="referral_pc_pendingItem_ntjSV">{{
                    item.invitedNickname
                  }}</span><span class="referral_pc_pendingItem_ntjSV">
										{{ item.invitedUserEmail }}</span><span class="referral_pc_pendingItem_ntjSV">{{
                    item.amount
                  }}</span>
								</div>

								<div class="referral_pc_noneData_3-lI5" v-show="this.earnList.length == 0">
									<img src="../../assets/images/box.png" class="referral_pc_noneImg_1pLRH" />
									<p class="referral_pc_noneText_3UlHM">
										{{ $t("profile.Youdontany") }}
									</p>
								</div>
								<div class="referral_pc_priceBox_2hJA8">
									<span class="referral_pc_priceItem_1hie7">
										{{ $t("profile.PendingReferrals") }} {{ size }} </span><span
										class="referral_pc_priceItem_1hie7">
										{{ $t("profile.TotalPendingReward") }}￥{{ size }}
									</span>
								</div>
							</div>

							<div v-show="3 === numAll">
								<div class="referral_pc_activityList_iyMfd">
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.UserName") }}
										</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">Mottwebsite ID</p>
									</span>
									<span class="referral_pc_activityItem_oed-W"><img
											src=""
											class="referral_pc_img_1qdDU" />
										<p class="referral_pc_text_1uX2x">
											{{ $t("profile.Reward") }}
										</p>
									</span>
								</div>
								<div class="referral_pc_pendingList_rWlha" v-for="item in earnList" :key="item.id"
									style="margin: 20px 0px">
									<span class="referral_pc_pendingItem_ntjSV">{{
                    item.invitedNickname
                  }}</span><span class="referral_pc_pendingItem_ntjSV">
										{{ item.invitedUserEmail }}</span><span class="referral_pc_pendingItem_ntjSV">{{
                    item.amount
                  }}</span>
								</div>

								<div class="referral_pc_noneData_3-lI5" v-show="this.earnList.length == 0">
									<img src="../../assets/images/box.png" class="referral_pc_noneImg_1pLRH" />
									<p class="referral_pc_noneText_3UlHM">
										{{ $t("profile.qualifiedreferrals") }}
									</p>
								</div>
								<div class="referral_pc_priceBox_2hJA8">
									<span class="referral_pc_priceItem_1hie7">
										{{ $t("profile.PendingReferrals") }} {{ size }} </span><span
										class="referral_pc_priceItem_1hie7">
										{{ $t("profile.TotalPendingReward") }}￥{{ size }}
									</span>
								</div>
							</div>
						</main>
					</div>
				</div>
			</div>
		</div>

		<!-- 移动端 -->

		<div class="user_referral_iphone">
			<main class="mainPage_mb_content_2ozs2">
				<div class="referral">
					<div class="main-content02">
						<div class="referral-wrap">
							<div class="referral-wrap-first text-center">
								<p class="refer-title">{{ $t("profile.TellFriend") }}</p>
								<h2 class="refer-help">
									{{ $t("profile.earn1") }} <br />
									￥{{ money01 }} {{ $t("profile.earn2") }}
								</h2>
								<p class="refer-option">{{ $t("profile.earn3") }}</p>
								<p class="refer-copy">
									<small> {{ $t("profile.earn4") }}</small>
								</p>
								<div class="refer-first-div">
									<input id="inputUrl02" :value="inputUrl" type="text" disabled="disabled"
										class="text-select" />
									<img @click="copyChange" src="../../assets/images/copyIcon.png"
										class="reflash-icon" />
								</div>
							</div>
						</div>
						<div class="friend-form-content">
							<p class="paste-link">{{ $t("profile.earn6") }}</p>
							<div class="friends-input">
								<form class="van-form" style="
                    background: rgb(247, 247, 247) !important;
                    color: red !important;
                  ">
									<p>{{ $t("profile.Yourname") }}</p>
									<div class="van-cell van-field">
										<div class="van-cell__value van-cell__value--alone van-field__value">
											<div class="van-field__body">
												<input type="text" class="van-field__control" v-model="yourname" />
											</div>
										</div>
									</div>
									<p>{{ $t("profile.Yourfriend") }}</p>
									<div class="van-cell van-field">
										<div class="van-cell__value van-cell__value--alone van-field__value">
											<div class="van-field__body">
												<input type="text" class="van-field__control" v-model="youremail" />
											</div>
										</div>
									</div>
									<div class="van-cell van-field" style="
                      padding: 10px;
                      border: 0.05rem solid rgb(181, 181, 181);
                    ">
										<div class="van-cell__value van-cell__value--alone van-field__value">
											<div class="van-field__body">
												<textarea rows="4" color="red"
													placeholder="Hey, I'm a member of Mottwebsite, and I've saved a lot so far on my online shopping. Join now with me and discover our great offers today!"
													class="van-field__control" style="height: 96px"
													v-model="content"></textarea>
											</div>
										</div>
									</div>
								</form>
								<p>{{ $t("profile.Youabove") }}</p>
								<div class="text-center">
									<button class="btn-submit" @click="earn">
										{{ $t("profile.SendEarn") }}
									</button>
								</div>
							</div>

							<div class="referral-wrap-second">
								<p class="second-title">{{ $t("profile.performance") }}</p>
								<p class="refer-text-first">{{ $t("profile.earn7") }}</p>
								<p class="refer-text-second">
									￥{{size}}
									<i @click="iconChange" class="reward-icon">
										<span v-show="IsiconChange" class="reward-icon-text">
											Note: Your referral bonus will remain pending until your
											referee verified review on Amazon.
										</span></i>
								</p>

								<!-- 三个选项 -->
								<div class="bg-white">
									<div class="friends-title text-center">
										{{ $t("profile.Referralactivity") }}
									</div>
									<div class="van-row">
										<div class="van-col van-col--8">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.UserName")
                      }}</small>
										</div>
										<div class="van-col van-col--10">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.MottwebsiteID")
                      }}</small>
										</div>
										<div class="van-col van-col--6">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.earn10")
                      }}</small>
										</div>
									</div>
									<div data-v-c218b842="" class="van-row" v-for="item in earnList" :key="item.id">
										<div data-v-c218b842="" class="van-col van-col--8">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedNickname }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--10">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedUserEmail }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--6">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.amount }}
											</p>
										</div>
									</div>
									<div class="table-wrapper" v-show="this.earnList.length == 0">
										<div class="no-data">
											<img src="../../assets/images/box.png" alt="" />
											<p style="text-align: center">
												{{ $t("profile.Youdon")
                        }}<span class="common-text-color">{{
                          $t("profile.referfriends")
                        }}</span>
											</p>
										</div>
									</div>
								</div>

								<div class="bg-white">
									<div class="friends-title text-center">
										{{ $t("profile.TotalPendingReward") }}
										<i @click="iconChange2" class="reward-icon"><span v-show="IsiconChange2"
												class="reward-icon-text" style="display: none">Calculated by the
												quantity of your registered
												referrals</span></i>
									</div>
									<div class="van-row">
										<div class="van-col van-col--8">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.UserName")
                      }}</small>
										</div>
										<div class="van-col van-col--10">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.MottwebsiteID")
                      }}</small>
										</div>
										<div class="van-col van-col--6">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.Reward")
                      }}</small>
										</div>
									</div>
									<div data-v-c218b842="" class="van-row" v-for="item in earnList" :key="item.id">
										<div data-v-c218b842="" class="van-col van-col--8">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedNickname }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--10">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedUserEmail }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--6">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.amount }}
											</p>
										</div>
									</div>
									<div class="table-wrapper" v-show="this.earnList.length == 0">
										<div class="no-data">
											<img src="../../assets/images/box.png" alt="" />
											<p style="text-align: center">
												{{ $t("profile.Youdontany") }}
											</p>
										</div>
									</div>
									<div class="total-footer">
										<div class="van-row">
											<div class="van-col van-col--12">
												{{ $t("profile.PendingReferrals") }} <br />
												{{size}}
											</div>
											<div class="van-col van-col--12">
												{{ $t("profile.TotalPendingReward") }}: <br />
												￥{{size}}
											</div>
										</div>
									</div>
								</div>

								<div class="bg-white">
									<div class="friends-title text-center">
										{{ $t("profile.PendingReward") }}
										<i @click="iconChange3" class="reward-icon"><span v-show="IsiconChange3"
												class="reward-icon-text" style="display: none">Calculated by the
												quantity of your registered
												referrals</span></i>
									</div>
									<div class="van-row">
										<div class="van-col van-col--8">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.UserName")
                      }}</small>
										</div>
										<div class="van-col van-col--10">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.MottwebsiteID")
                      }}</small>
										</div>
										<div class="van-col van-col--6">
											<div class="table-img">
												<img src=""
													alt="" />
											</div>
											<small class="text-center">{{
                        $t("profile.Reward")
                      }}</small>
										</div>
									</div>
									<div data-v-c218b842="" class="van-row" v-for="item in earnList" :key="item.id">
										<div data-v-c218b842="" class="van-col van-col--8">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedNickname }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--10">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.invitedUserEmail }}
											</p>
										</div>
										<div data-v-c218b842="" class="van-col van-col--6">
											<p data-v-c218b842="" class="text-center text-box">
												{{ item.amount }}
											</p>
										</div>
									</div>
									<div class="table-wrapper" v-show="this.earnList.length == 0">
										<div class="no-data">
											<img src="../../assets/images/box.png" alt="" />
											<p style="text-align: center">
												{{ $t("profile.Youdontany") }}
											</p>
										</div>
									</div>
									<div class="total-footer">
										<div class="van-row">
											<div class="van-col van-col--12">
												{{ $t("profile.PayableReferrals") }}: <br />
												{{size}}
											</div>
											<div class="van-col van-col--12">
												{{ $t("profile.TotalPendingReward") }}: <br />
												￥{{size}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from "vant";
	export default {
		name: "referral",
		data() {
			return {
				text1: "I'm a member of mottwebsite and I've been saving a lot of online shopping. Join me now and discover a good campaign.",
				text2: "私はMottwebsiteのメンバーで、これまでにオンラインショッピングでたくさんの節約をしてきました。今すぐ私と一緒に入会して、お得なキャンペーンを発見しましょう。",
				inputUrl: "/#/?cId=",
				text: "",
				yourname: "",
				userid: "",
				youremail: "",
				earnList: "",
				size: "",
				total: "",
				content:"",
				num: 1,
				numAll: 1,
				money01: 500,
				IsiconChange: false,
				IsiconChange2: false,
				IsiconChange3: false,
			};
		},
		created() {
			this.userid = window.localStorage.getItem("userId");
			this.inputUrl =
				window.location.protocol + "//" + window.location.host + this.inputUrl;
			this.inputUrl += this.userid;
			this.content = this.$i18n.locale == "en-US" ? this.text1 : this.text2 + this.inputUrl
			this.$axios({
				url: "user/siteUserCashbackRecord/siteUserCashbackRecords",
				method: "post",
				data: {
					type: 2,
					current: 1,
				},
			}).then((res2) => {
				this.earnList = res2.data.records.filter(
					(v) => v.invitedUserEmail !== ""
				);
				if (this.earnList.length == 0) {
					this.size = 0;
				} else {
					this.size = this.earnList.length * 500;
				}
				this.total = res2.data.total;
			});
		},
		methods: {
			handlePaste(e) {
				var clip = e.clipboardData.getData("Text");
				this.text = clip;
				console.log(clip);
			},
			earn() {
				this.$loading();
				this.$axios({
					url: "user/siteUser/emailShare",
					method: "post",
					data: {
						content: this.content,
						from: this.yourname,
						to: this.youremail,
					},
				}).then((res) => {
					this.$Toastclear();
					Toast(this.$t("profile.success"));
				});
			},
			//  设置点击复制网址事件
			copyChange() {
				this.$copyText(this.inputUrl).then((res) => {
					this.showToast("Url copied", "コピーされたURL");
				});
			},
			btnChangeNum(numa) {
				this.num = numa;
			},
			btnChange(numb) {
				this.numAll = numb;
			},
			iconChange() {
				this.IsiconChange = !this.IsiconChange;
			},
			iconChange2() {
				this.IsiconChange2 = !this.IsiconChange2;
			},
			iconChange3() {
				this.IsiconChange3 = !this.IsiconChange3;
			},
		},
	};
</script>

<style lang='scss' scoped>
	@media only screen and (max-width: 900px) {
		.user_referral_pc {
			display: none;
			overflow: hidden;
		}

		.referral .text-box[data-v-c218b842] {
			font-size: 0.6rem;
			color: #ff5900;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 0.15rem;
			height: 2rem;
			line-height: 2rem;
		}
	}

	@media only screen and (min-width: 900px) {
		.user_referral_iphone {
			display: none;
		}

		html {
			font-size: 30px;
		}

		.referral_pc_activityDataList_7QeZu {
			padding: 0 28px;
			height: 24px;
		}

		.referral_pc_activityDataList_7QeZu .referral_pc_activityDataItem_mJPgu {
			display: inline-block;
			width: 156px;
			text-align: center;
			color: #ff5900;
		}

		.referral_pc_stepBox_35Dk8 {
			width: 418px;
			display: inline-block;
			margin-left: 98px;
		}

		.van-steps--horizontal .van-steps__items {
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			margin: 0 0 10px;
			padding-bottom: 22px;
		}

		.van-step--horizontal .van-step__circle-container {
			position: absolute;
			top: 43px;
			left: -8px;
			z-index: 1;
			padding: 0 8px;
			background-color: #fff;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		.van-step--horizontal .van-step__line {
			top: 43px;
			left: 0;
			width: 100%;
			height: 1px;
		}

		.van-step--horizontal {
			float: left;
		}

		.van-step {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			color: #969799;
			font-size: 14px;
		}

		.van-step__circle {
			display: block;
			width: 10px;
			height: 10px;
			background-color: #969799;
			border-radius: 50%;
		}

		.referral_pc_pendingList_rWlha {
			display: flex;
		}

		.referral_pc_pendingList_rWlha .referral_pc_pendingItem_ntjSV {
			flex: 1;
			text-align: center;
			color: #ff5900;
		}

		.referral_pc_priceBox_2hJA8 {
			height: 40px;
			line-height: 40px;
			background: rgba(80, 190, 141, 0.2);
			color: #ff5900;
			margin: 0 20px;
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
		}

		.referral_pc_priceBox_2hJA8 .referral_pc_priceItem_1hie7 {
			padding: 0 80px;
		}
	}

	.el-input__inner:focus {
		border: 1px solid #ff5900;
	}

	.overFlow_routerBox {
		flex: 1;
		margin-left: 20px;
	}

	.referralPage {
		background: #fff;
		color: #595757;
	}

	.referral_pc_title {
		font-size: 24px;
		padding-left: 32px;
		border-bottom: 1px solid #efefef;
		font-weight: 400;
		margin-top: 0;
		margin-bottom: 0;
		color: #575655;
		line-height: 60px;
		text-align: left;
	}

	.referral_pc_navBox {
		display: flex;
		justify-content: space-between;
		padding: 0 18%;
		margin: 30px 0;
	}

	.referral_pc_navBox-item {
		width: 220px;
		border: 1px solid #fff;
		height: 45px;
		display: inline-block;
		text-align: center;
		line-height: 45px;
		color: #575655;
		box-sizing: border-box;
		cursor: pointer;
		font-size: 20px;
		border-radius: 4px;
	}

	.referral_pc_navBox-item--active {
		border: 1px solid #ff5900;
		color: #000;
	}

	.referral_pc_boxWrap {
		padding-bottom: 60px;
	}

	.referral_pc_earningText {
		font-size: 24px;
		text-align: center;
		color: #fff;
		background-color: #ff5900;
		padding: 19px;
		margin: 0 20px;
	}

	.referral_pc_txt1 {
		font-size: 24px;
		margin-top: 32px;
		color: #595757;
		text-align: center;
	}

	.referral_pc_txt2 {
		font-size: 16px;
		margin-bottom: 28px;
		color: #595757;
		margin-top: 4px;
		text-align: center;
	}

	.referral_pc_urlBox {
		text-align: center;
		padding-bottom: 30px;
		border-bottom: 1px solid #d2d2d2;
	}

	.referral_pc_copyBtn {
		font-size: 16px;
		font-family: Roboto-Regular;
		background-color: #ffaf52;
		color: #fff;
		margin-left: 40px;
		border-radius: 0;
		width: 130px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 4px;
		display: inline-block;
		cursor: pointer;
	}

	.referral_pc_txt3 {
		margin-top: 30px;
		font-size: 24px;
		margin-top: 32px;
		color: #595757;
		text-align: center;
	}

	.referral_pc_emailBox {
		text-align: center;
		width: 600px;
		margin: 0 auto;
	}

	.referral_pc_emailInputBox {
		width: 290px;
		display: inline-block;
		text-align: left;
	}

	.el-textarea__inner {
		position: relative;
		display: inline-block;
		width: 100%;
		vertical-align: bottom;
		font-size: 14px;
	}

	.el-textarea__inner:focus {
		border: 1px solid #ff5900;
		color: black;
	}

	.referral_pc_sendEmailBtn_2WHsS {
		width: 130px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		display: inline-block;
		background-color: #ffaf52;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
		border-radius: 4px;
		margin-top: 6px;
	}

	.referral_pc_boxWrap_1_Xis {
		padding-bottom: 60px;
	}

	.referral_pc_earningText_1bvCO {
		font-size: 24px;
		text-align: center;
		color: #fff;
		background-color: #ff5900;
		padding: 19px;
		margin: 0 20px;
	}

	.referral_pc_earningText_1bvCO .referral_pc_howIcon_3Xlib {
		background: #fff;
		width: 17px;
		height: 17px;
		display: inline-block;
		font-size: 12px;
		text-align: center;
		vertical-align: top;
		margin-left: -2px;
		line-height: 17px;
		border-radius: 50%;
		font-weight: 700;
		color: #ff5900;
		font-style: normal;
	}

	.referral_pc_overviewText_2UlUz {
		padding-left: 40px;
		font-size: 24px;
		line-height: 50px;
	}

	.referral_pc_overTxtNavBox_1av_h {
		margin: 0 20px;
		padding: 0 20px;
		padding-bottom: 20px;
		border-bottom: 2px solid #eee;
		display: flex;
		justify-content: space-between;
	}

	.referral_pc_overTxtNavBox_1av_h .referral_pc_overTxtNavItem_2hFnJ {
		width: 230px;
		height: 44px;
		line-height: 44px;
		box-sizing: border-box;
		border: 1px solid #fff;
		padding-bottom: 10 15px;
		cursor: pointer;
		font-size: 16px;
		text-align: center;
		border-radius: 4px;
	}

	.referral_pc_overTxtNavBox_1av_h .referral_pc_overTxtNavItem--active_2nul0 {
		border-color: #ff5900 !important;
		background: #fff !important;
	}

	.referral_pc_overTxtNavBox_1av_h .referral_pc_howIcon1_1_SNK {
		width: 10px;
		height: 10px;
		margin-left: -2px;
		vertical-align: 3px;
		display: inline-block;
		background: url() 0 0 no-repeat;
	}

	.referral_pc_overTxtNavItem {
		border-color: #ff5900 !important;
		background: #fff !important;
	}

	.referral_pc_overTxtNavBox_1av_h .referral_pc_howIcon1_1_SNK {
		width: 10px;
		height: 10px;
		margin-left: -2px;
		vertical-align: 3px;
		display: inline-block;
		background: url() 0 0 no-repeat;
	}

	.referral_pc_activityList_iyMfd {
		display: flex;
		padding: 0 10px;
		justify-content: space-around;
		margin-top: 30px;
		font-size: 18px;
		align-items: center;
	}

	.referral_pc_activityList_iyMfd .referral_pc_activityItem_oed-W {
		width: 130px;
		text-align: center;
	}

	.referral_pc_activityList_iyMfd .referral_pc_activityItem_oed-W .referral_pc_img_1qdDU {
		height: 40px;
	}

	.referral_pc_activityList_iyMfd .referral_pc_activityItem_oed-W .referral_pc_text_1uX2x {
		margin-top: 10px;
	}

	.referral_pc_noneData_3-lI5 {
		text-align: center;
		margin-top: 60px;
	}

	.referral_pc_noneData_3-lI5 .referral_pc_noneImg_1pLRH {
		width: 180px;
		height: 146px;
	}

	.referral_pc_noneData_3-lI5 .referral_pc_noneText_3UlHM {
		font-size: 12px;
		margin-top: 20px;
	}

	.active-text {
		color: #ff5900;
		cursor: pointer;
	}

	.referral_pc_priceBox_2hJA8 {
		height: 40px;
		line-height: 40px;
		background: rgba(80, 190, 141, 0.2);
		color: #ff5900;
		margin: 0 20px;
		margin-top: 40px;
		display: flex;
		justify-content: space-between;
	}

	.referral_pc_priceBox_2hJA8 .referral_pc_priceItem_1hie7 {
		padding: 0 80px;
	}

	.referral_pc_priceBox_2hJA8 .referral_pc_priceItem_1hie7 {
		padding: 0 80px;
	}

	.mounClass {
		text-align: center !important;
	}

	.mainPage_mb_content_2ozs2 {
		background: #f5f5f5;
		padding-bottom: calc(2.15rem + env(safe-area-inset-bottom));
		padding-bottom: calc(2.15rem + constant(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
		padding: 0.6rem 0.6rem 0.75rem 0.6rem;

		.main-content02 {
			padding-top: 0.5rem;
			background-color: #f5f5f5;
			padding-bottom: 0.7rem;
		}

		.referral-wrap {
			background: #f7f7f7;
			/* padding: .6rem .6rem .75rem .6rem; */
		}

		.referral-wrap-first {
			padding-bottom: 1.1rem;
			margin-bottom: 0.6rem;
		}

		.text-center {
			text-align: center;
			margin-top: 14px;
		}

		.referral-wrap-first .refer-title {
			text-align: center;
			line-height: 1.7rem;
			height: 1.7rem;
			color: #fff;
			background: #ff5900;
			font-size: 0.8755rem;
		}

		.referral-wrap-first .refer-help {
			color: #ff5900;
			font-size: 0.825rem;
			line-height: 0.9rem;
			padding: 0.4rem;
			font-weight: 400;
		}

		.referral-wrap-first .refer-option {
			color: #595757;
			font-size: 0.75rem;
		}

		.referral-wrap-first .refer-copy {
			color: #595757;
			font-size: 0.6rem;
			margin: 0.2rem;
		}

		.referral-wrap-first .refer-first-div {
			position: relative;
			background: #c9caca;
			margin: 0 0.45rem 0.6rem;
			font-size: 0.7rem;
			color: #595757;
			height: 1.7rem;
			line-height: 1.7rem;
		}

		.referral-wrap-first .refer-first-div input {
			height: 100%;
			font-size: 0.7rem;
			border: none;
			background-color: transparent;
			border-radius: 0;
			box-shadow: none;
			display: block;
			padding: 0;
			margin: 0;
			width: 100%;
			line-height: normal;
			color: #424242;
			font-family: inherit;
			box-sizing: border-box;
			user-select: text;
			appearance: none;
		}

		.referral-wrap-first .refer-first-div .reflash-icon {
			position: absolute;
			right: 0.8rem;
			top: 0.4rem;
			width: 0.96rem;
			height: 0.96rem;
		}

		.friend-form-content {
			.paste-link {
				border-top: 1px solid #d2d2d2;
				font-size: 0.75rem;
				color: #595757;
				padding: 0.8rem 0;
				margin-left: -0.6rem;
				margin-right: -0.6rem;
				text-align: center;
				font-weight: 700;
			}

			.friends-input {
				background: #f7f7f7 !important;

				.van-form p {
					color: #595757;
					font-size: 0.7rem;
					margin-top: 0.5rem;
					text-align: left;
				}
			}

			.van-cell {
				margin: 5px 0px;
				width: 100%;
				border: 0.05rem solid #b5b5b5;
				padding: 0.2rem 0.6rem;
				margin-bottom: 0.6rem;
				font-size: 0.7rem;
				color: #000;
				box-sizing: border-box;
				background-color: transparent;
			}

			.friends-input p {
				color: #595757;
				font-size: 0.7rem;
				margin-top: 0.5rem;
				text-align: left;
			}

			.text-center {
				text-align: center;
			}

			.btn-submit {
				background-color: #ffaf52;
				width: auto;
				text-align: center;
				display: inline-block;
				color: #fff;
				padding: 0.4rem 1.5rem;
				border-radius: 4px;
				font-size: 0.7rem;
				font-weight: 700;
				border: none;
				margin: 1rem 0;
			}
		}

		.referral-wrap-second {
			padding-top: 1rem;
		}

		.second-title {
			color: #fff;
			background: #ff5900;
			text-align: center;
			line-height: 1.7rem;
			height: 1.7rem;
			font-size: 0.8755rem;
		}

		.refer-text-first {
			font-size: 0.825rem;
			color: #ff5900;
			text-align: center;
			padding-top: 0.45rem;
		}

		.refer-text-second {
			color: #ff5900;
			text-align: center;
			font-size: 0.9755rem;
			margin-bottom: 0.55rem;
		}

		.reward-icon {
			position: relative;
			width: 0.6rem;
			height: 0.6rem;
			display: inline-block;
			background: url() 0 0 no-repeat;
			top: -0.1rem;
		}

		.bg-white {
			background-color: #fff;
		}

		.friends-title {
			color: #ff5900;
			font-size: 0.825rem;
			padding: 1rem 0;
		}

		.van-col--8 {
			width: 33.33333333%;
		}

		.table-img {
			line-height: 24px;
			height: 1.4rem;
		}

		.van-col--10 {
			width: 41.66666667%;
		}

		.table-img img {
			height: 1.35rem;
			max-width: 100%;
			display: block;
			margin: auto;
		}

		.no-data img {
			display: block;
			max-width: 100%;
			width: 4.5rem;
			height: 3.65rem;
			margin: 1.5rem auto 0.9rem;
		}

		.common-text-color {
			color: #ff5900;
		}

		.total-footer {
			font-size: 0.6rem;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			color: #ff5900;
			background-color: #dbedf6;
			font-weight: 700;
			padding-left: 0.6rem;
			padding-right: 0.6rem;
			word-break: break-word;
			margin-top: 0.3rem;
		}

		.van-col--12 {
			width: 50%;
			text-align: left;
		}

		.van-col {
			box-sizing: border-box;
			min-height: 1px;
			display: flex;
			flex-direction: column;
		}

		.reward-icon-text {
			width: 223px;
			padding: 0.25rem 0.5rem;
			position: absolute;
			z-index: 87;
			line-height: 1.1rem;
			top: 1.5rem;
			right: -2.8rem;
			background-color: #f7f7f7;
			color: #838383;
			border-radius: 4px;
			font-size: 14px;
		}
	}
</style>
